<template>
  <div class="con">
    <div class="i_warp word_break__break_all">
      <div class="item">
        <div class="tips">头像</div>
        <div class="val">
          <el-avatar :size="40" :src="profilePictureSrc"></el-avatar>
        </div>
      </div>
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="tips">
          <p>{{ item.tips }}</p>
        </div>
        <div class="val">
          <p>{{ item.value }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getUserById } from "@/api/family-and-users-management/member"
export default {
  data() {
    return {
      userObj: {},
    }
  },
  computed: {
    profilePictureSrc() {
      let row = this.userObj || {}
      try {
        let base_url = process.env.VUE_APP_IMG_BASE_URL,
          url = row.headUrl;
        if (url) {
          return `${base_url}/${url}`
        }
      } catch (error) { }
      return ""
    },
    list() {
      let arr1 = [{
        tips: '昵称',
        val: 'nickName'
      }, {
        tips: '手机号',
        val: 'username'
      }, {
        tips: '所属品牌',
        val: 'nickName'
      }, {
        tips: '注册时间',
        val: 'createdDate'
      }]
      if (!this.userObj.id) {
        return []
      }
      let arr2 = []
      arr1.forEach(el => {
        arr2.push({
          tips: el.tips,
          value: this.userObj[el.val] || '',
        })
      })
      return arr2
    }
  },
  created() {
    this.pageInfo()
  },
  methods: {
    pageInfo() {
      let { id = 0 } = this.$route.query;
      id = parseInt(id) || 0
      getUserById({ id }).then(res => {
        if (res.code === 200) {
          this.userObj = res.data || {}
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.con {
  background-color: #fff;
  padding: 24px;
  margin: 20px;
  border-radius: 16px;
}

.i_warp {
  display: grid;
  grid-gap: 40px 48px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  .tips {
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    color: #8B8B8B;
    padding-bottom: 16px;
  }

  .val {
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    color: #15181D;
  }
}
</style>